<template>
  <div class="pages" ref="contentScroll">
    <div class="scroll2">
      <el-form :model="ruleForm" ref="ruleForm" label-position="left" label-width="80px">
        <el-form-item label="场馆名称">
          <h3>{{ ruleForm.venue}}</h3>
        </el-form-item>
        <el-form-item label="区域名称" style="margin-top: 30px">
          <div v-for="(i,ii) in seatList" :key="ii">
            <el-input v-model.trim="i.areaname" size="mini" class="ina" @change="changeName(i)" @focus="inpOcus(i)" />
            <el-button size="mini" @click.prevent="cory(i)" type="primary" :disabled="i.areaname == ''">复制</el-button>
            <el-button type="success" size="mini" @click.prevent="addDomain(i)" icon="el-icon-plus" v-if="i.id == timestamp"></el-button>
            <el-button size="mini" @click.prevent="removeDomain(i)" v-else type="danger" icon="el-icon-minus"></el-button>

          </div>
        </el-form-item>
        <el-form-item label="Y坐标">
          <el-slider v-model="y" :max="max" :marks="marks" @change="handleChangeY"></el-slider>
        </el-form-item>
        <el-form-item label="X坐标">
          <el-slider v-model="x" :max="max" :marks="marks" @change="handleChangeX"></el-slider>
        </el-form-item>

        <el-form-item label="座位类型" style="margin-top: 30px">
          <div class="zw">
            <el-button class="seatButton" size="mini" :style="{background: i.unselectedColor}" v-for="(i,ii) in getSeattypecolor" @click="markSeats(i)" :key="ii">
              <img class="zwimg" v-if="i.unselectedColor" :src="i.unselectedColor" />
              {{ i.seatTypeName}}</el-button>
          </div>
        </el-form-item>
      </el-form>
      <el-button class="buton" size="small" type="primary" :loading="confirmButtonLoading" @click="confirm('ruleForm')">确定</el-button>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'ControllerAside',
  components: {},
  props: ['prop_x', 'prop_y', 'ipAddress'],
  data() {
    return {
      color: '',
      max: 50,
      x: 10,
      y: 10,
      marks: {
        10: '10',
        20: '20',
        30: '30',
        40: '40',
        50: '50',
      },
      ruleForm: {
        venue: '',
      },
      timestamp: Date.parse(new Date()),
      getSeattypecolor: [],
    }
  },
  watch: {
    prop_x: {
      handler(value) {
        this.x = value
      },
      immediate: true,
    },
    prop_y: {
      handler(value) {
        this.y = value
      },
      immediate: true,
    },
  },
  computed: {
    ...mapState({
      confirmButtonLoading: (state) => state.hallSeat.confirmButtonLoading,
      seatList: (state) => state.hallSeat.seatList,
    }),
  },
  created() {
    this.getSeattypecolor = []
    this.ruleForm.venue = this.$route.query.venue
    let obk = {
      id: this.timestamp,
      areaname: '',
      listseat: [],
    }
    this.upNc(obk)

    let parmas = {
      venname: this.$route.query.venue,
      Id: this.$route.query.timeId,
    }
    this.http.get('/api/cinemaSeat/GetSeat', parmas).then((res) => {
      if (res.data.arealist.length != 0) {
        this.allPullSeat(res.data.arealist)
        obk = res.data.arealist[0]
        this.timestamp = res.data.arealist[0].id
      } else {
        this.addSeatList(obk)
      }
      this.inpOcus(obk)
    })
    let pa = {
      order: 'desc',
      page: 1,
      rows: 30,
      sort: 'Id',
      wheres: '[]',
    }
    this.http.post('/api/Mall_seattypecolor/GetpageDate', pa).then((res) => {
      this.getSeattypecolor = res.rows
      this.getSeattypecolor.push({
        id: -1,
        seatTypeName: '清空',
        selectedColor: '',
        unselectedColor: '',
      })
      this.setSeattypecolor(this.getSeattypecolor)
    })
  },
  methods: {
    ...mapMutations(['changeX', 'changeY', 'changeReset', 'setSeatList', 'upNc', 'addSeatList', 'delSeatList', 'allPullSeat', 'setSeattypecolor']),
    cory(i) {
      let ob = {
        ...i,
      }
      ob.areaname = i.areaname + '_复制'
      ob.id = i.id + Math.round(Math.random() * 1000)
      this.addSeatList(ob)
    },
    inpOcus(e) {
      let arr = this.seatList.filter((i) => i.id == e.id)[0]
      if (arr.listseat.length == 0) {
        this.changeX(0)
        this.changeY(0)
      } else {
        let xx = arr.listseat.map((i) => i.x_axis)
        let yy = arr.listseat.map((i) => i.y_axis)
        this.changeX(Math.max.apply(null, xx))
        this.changeY(Math.max.apply(null, yy))
        this.$emit('seatRender')
      }
      this.upNc({
        id: e.id,
        areaname: e.areaname,
      })
    },
    changeName(e) {
      let arr = this.seatList
        .filter((i) => i.id == e.id)[0]
        .listseat.map((i) => {
          return {
            x: i.x_axis,
            y: i.y_axis,
            type: i.ticket_type,
            backimg: i.colour,
            pitch_on_color: i.pitch_on_color,
          }
        })
      let ov = {
        areaname: e.areaname,
        id: e.id,
        listseat: arr,
      }
      this.upNc({
        areaname: e.areaname,
        id: e.id,
      })
      this.setSeatList(ov)
    },
    removeDomain(e) {
      if (this.seatList.length == 1) return false
      this.seatList = this.seatList.filter((i) => i != e)
      this.delSeatList(e)
    },
    addDomain() {
      let ob = {
        id: Date.parse(new Date()),
        areaname: '',
        listseat: [],
      }
      this.addSeatList(ob)
    },

    handleChangeX() {
      this.changeX(this.x)
      this.changeReset(true)
    },
    handleChangeY() {
      this.changeY(this.y)
      this.changeReset(true)
    },
    markSeats(e, n) {
      this.$emit('markSeats', e, n)
    },
    confirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let status = true
          status = this.seatList.every((i) => {
            return i.areaname != ''
          })
          if (status) {
            this.$emit('confirm')
          } else {
            this.$Message.error('区域名称不能为空')
          }
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.pages {
  width: 300px;
  .scroll2 {
    padding: 20px;
    .zw {
      display: flex;
      flex-wrap: wrap;
    }
    .seatButton {
      margin: 0 10px 10px 0;
      .zwimg {
        width: 30px;
        height: 30px;
      }
    }
    .buton {
      margin-left: 100px;
    }
  }
  .qygla {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .ina {
      margin-right: 10px;
    }
  }
}
</style>
